<template>
  <a-form :form="form">
    <a-row>
      <a-col :span="12">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.selBox','选择消息盒子')">
          <a-select style="width: 80%" id="columnId" v-model="message" @change="defChangeType">
            <a-select-option v-for="item in messageList" :key="item.boxId" :value="item.boxId">{{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="12">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.setColumns','设置每行列数')">
          <a-input-number :min="2" :max="12" :placeholder="i18n('form.columns','列数')" v-model="listCount" style="width: 80%!important;"/>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
  import {BaseForm, RxDialog} from "@lowcode/jpaas-common-lib";
  import rxAjax from '@/assets/js/ajax.js';

  export default {
    name: "InsColumnDefMessageBel",
    mixins: [BaseForm],
    components: {
      RxDialog, rxAjax,
    },
    props: {
      dataObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        listCount: 6,
        message: "",
        messageList: [],
        functions: ""
      }
    },
    created() {
      this.functions = this.dataObj.function;
      this.listCount = this.dataObj.listCount;
      this.message = this.functions
      this.getMessageList();
    },
    methods: {
      i18n(name,text,key){
        return this.$ti18(name,text,"insColumnDef",key);
      },
      defChangeType(val) {
        this.functions = val;
      },
      getMessageList() {
        var parameter = {
          pageNum: "",
          pageSize: "",
          params: {}
        }
        var url = '/api-portal/portal/core/insMsgboxDef/query';
        rxAjax.postJson(url, parameter).then(res => {
          this.messageList = res.result.data;
        })
      },
      valid() {
        if (!this.functions) {
          return false;
        }
        return true;
      }
    },
    watch: {
      functions: function (val) {
        this.dataObj.function = val;
        this.$emit("change", this.dataObj);
      },
      listCount: function (val) {
        this.dataObj.listCount = val;
        this.$emit("change", this.dataObj);
      }
    }
  }
</script>

<style scoped>

</style>